<template>
    <div>
        <div v-if="shoppingTrolleyDishList.length!=0">
        <van-checkbox-group v-model="checkedDishList" ref="checkGroupDishRef">
            <DishShoppingTrolley
                    v-for="dish in shoppingTrolleyDishList"
                    :dish="dish" :getShoppingTrolleyDishList="getShoppingTrolleyDishList">
            </DishShoppingTrolley>
        </van-checkbox-group>
            <div class="occupation">
                <van-submit-bar
                        class="submitOrderBtn"
                        :price="dishSumPrice"
                        button-text="提交订单"
                        @submit="sumbitOrder">
                    <van-checkbox @change="checkAllOrNotAll" v-model="checkAll">全选</van-checkbox>
                </van-submit-bar>
            </div>
        </div>
        <!--空状态-->
        <van-empty v-else image="error" description="你还未添加商品" />
    </div>

</template>

<script>
import DishShoppingTrolley from "../components/DishShoppingTrolley";

export default {
        name: "ShoppingTrolley",
        components:{DishShoppingTrolley},
        computed:{
          userID(){
             const userID=sessionStorage.getItem("userID");
             return userID;
          },
            //选择的订单价格
          dishSumPrice(){
              let price=0;
              this.shoppingTrolleyDishList.forEach(dish=>{
                  //循环选中的id
                 this.checkedDishList.forEach(checkDid=>{
                     if (checkDid==dish.did){
                         price+=dish.price*dish.sellVolume;
                     }
                 });
              });
              return price*100;
          }
        },
        data(){
            return {
                //购物车菜品列表
                shoppingTrolleyDishList:[],
                //是否全选
                checkAll:false,
                //选中的菜品did
                checkedDishList:[]
            }
        },
        created() {
            this.getShoppingTrolleyDishList();
        },
        methods:{
            //查询购物车信息
           async getShoppingTrolleyDishList(){
              const{data:res}=await this.$http.get("/dish/findShoppingDish/"+this.userID);
              if (res.status!=200)return this.$notify({type:"danger",message:"查询购物车信息失败"});
              this.shoppingTrolleyDishList=res.data;
               this.$store.commit('updateShoppingTotal',this.shoppingTrolleyDishList.length);
            },
            //全选和不全选菜单
            checkAllOrNotAll(){
               this.$refs.checkGroupDishRef.toggleAll(this.checkAll);
            },
            //提交订单
           async sumbitOrder(){
                const didStr=this.checkedDishList.join(',');
                const deskName=this.$store.state.deskName;
               const {data:res}=await this.$http.post("/order/addOrder",
                    {uid:this.userID,dids:didStr,deskName:deskName,totalMoney:this.dishSumPrice/100});
               if (res.status!=200)return ;
               this.$notify({type:'success',message:"下单成功"});
               this.checkedDishList=[];
               await this.getShoppingTrolleyDishList();
            }
        }
    }
</script>

<style scoped>
    .occupation{
        height: 100px;
        width: 100%;
    }
    .submitOrderBtn{
        margin-bottom: 50px;
    }
</style>
